<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>jQuery Animations</title>
		<link rel="stylesheet" href="css/.css">		
		<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
			
		<script>
		$(document).ready(function(){
			
			/*********** OPEN SCENE ON PAGE LOAD START  *********/
			// Open screen animation
			$(".openingSceneDiv")
				.animate({height: "0.2%"}, 1000)
				.animate({width:"100%"}, 1000)
				.animate({top:"0",height: "100%"}, 1000, 						
					function() {						
						animateImage();						
					}
				);
			/*********** OPEN SCENE ON PAGE LOAD END *********/
			
			/*********** ROTATE IMAGES ON PAGE LOAD START  *********/
			$(".photosWrapper img").hide();	
			
			var numRand;			
			var degrees;
			var range = 45;
			
			// Rotate images
			$(".photosWrapper img")
			.each(
					function() 
					{
						numRand = Math.floor(Math.random() * (2 * range)) - range;
						degrees = "rotate(" +numRand + "deg)";				
						$(this).css("-webkit-transform", degrees);
					}
			);
			/*********** ROTATE IMAGES ON PAGE LOAD START  *********/
			
			
			/*********** FADE IN IMAGES  START *********/
			// Callback function to apply animation non-sequentially
			var items = $(".photosWrapper img");
			var i = 0;
			var animateImage = function() 
			{					
				var duration = Math.floor(Math.random() * 2000);				
				$(items[i]).fadeIn(duration, 
				function() {
					animateImage();				
					i++;
				});
			}		
			
			/*********** FADE IN IMAGES  END  *********/


			/***********EVENT HANDLING FOR CLICK OF IMAGE START *********/			
			$(".photosWrapper  img")
			.click(
				function() {
					onClickImage();
				}
			);
			
			var onClickImage = function()
			{
				$(".imageFullScreenSize").toggleClass("imageFullScreenSize","imageNormalSize", 1000);
				$(this).toggleClass("imageNormalSize","imageFullScreenSize", 1000);				
			}
			/***********EVENT HANDLING FOR CLICK OF IMAGE  END *********/
		});
		
		
		</script>
		<style>
			body {
				background-color: white;
				margin:0px;
				padding:0px;
			}
			
			.openingSceneDiv {
				position: absolute;				
				top:50%;
				left:0%;				
				height:1%;
				background-color:black;
				padding: 0px;
				margin:0px;
			}
			
			.photosWrapper {
				margin: 100px 50px;				
			}
			
			.photosWrapper img:hover {
				cursor:pointer;			
			}
			
			.imageNormalSize {
			
			}
			
			.imageFullScreenSize {
				height: 100%;
				width: 100%;
				opacity: 0.5;
			}
		</style>
	</head>
	<body>
		<div class="openingSceneDiv">
			<div class="photosWrapper">
				<img id="img1" src="C:\Users\B813\Downloads\Abhi.jpg"></img>
				<img id="img2" src="https://lh3.googleusercontent.com/eLn-MD5tdq0a5S8_qCmP7OSTL4q-TvdTadhcIfWdyGA=w284-h159-p-no"></img>
				<img id="img3" src="https://lh6.googleusercontent.com/axlIUjZ328xkZT2szwYDzq7MI2sI58Kh7d_GPlqqlPY=w115-h204-p-no"></img>
				<img id="img4" src="https://lh4.googleusercontent.com/Qt95fbU3RVK0X3loA5T2MkyPZgcNSnseGGqh5AdygzU=w407-h229-p-no"></img>				
			</div>
		</div>
	</body>
</html>